import React, { useEffect, useRef } from 'react';

interface AutoThreeSceneProps {
  pagePath: string;
  style?: React.CSSProperties;
}

/**
 * 自动Three.js场景组件
 * 根据页面路径自动导入对应的init函数
 */
export const AutoThreeScene: React.FC<AutoThreeSceneProps> = ({ 
  pagePath, 
  style = { width: '100%', height: '100%' }
}) => {
  const mountRef = useRef<HTMLDivElement>(null);
  const cleanupRef = useRef<(() => void) | null>(null);

  useEffect(() => {
    if (!mountRef.current) return;

    // 动态导入对应页面的init函数
    const loadScene = async () => {
      try {
        const module = await import(`../pages/${pagePath}/three`);
        if (module.init && mountRef.current) {
          cleanupRef.current = module.init(mountRef.current);
        }
      } catch (error) {
        console.error(`Failed to load scene from ${pagePath}:`, error);
      }
    };

    loadScene();

    // 组件卸载时清理
    return () => {
      if (cleanupRef.current) {
        cleanupRef.current();
      }
    };
  }, [pagePath]);

  return <div ref={mountRef} style={style} />;
}; 